<template>
	<view class="main">
		<u-navbar back-text="" slot="center" :autoBack="true" safeAreaInsetTop placeholder>
			<view slot="center" class="leftText" maxlength="400">找活信息</view>
		</u-navbar>
		<view class="row-item v-box">
			<u--form
				labelPosition="left"
				:model="form"
				:rules="rules"
				ref="form1"
				:labelStyle="{'font-size':'28rpx','color':'#424242'}"
			>
				<u-form-item label="请选择期望地点" labelWidth="110" prop="userInfo.range" borderBottom @click="cleanAddresIndex" >
					<u--input 
						v-model="formData.hopeAddrName" 
						fontSize="14" 
						readonly 
						disabledColor="#0F0F0F" 
						inputAlign="right"  
						border="none" 
						placeholder="请选择"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="您找活的工种"labelWidth="100" prop="userInfo.range" borderBottom @click="checkNavGongZhong">
					<u--input 
						v-model="formData.skillsName" 
						fontSize="14" 
						readonly  
						disabledColor="#0F0F0F" 
						inputAlign="right"  
						border="none" 
						placeholder="请选择"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			
			
				<view class="row-ts poser">
					<view class="rs-name">长短工</view>
					<view class="rs-pos">
						<label v-for="(k,v) in longWorkList" :key="v" 
							:class="{'acts':k.id == formData.workType1}" 
							@click="checkLongWork(k,v)">{{k.name}}</label>
					</view>
				</view>
			
			<view class="row-ts poser">
				<view class="rs-name">干活方式</view>
				<view class="rs-pos">
					<label v-for="(k,v) in workTypeList" :key="v" :class="{'acts':k.id == formData.workType2}" 
						@click="checkWorkType(k,v)">{{k.name}}</label>
				</view>
			</view>
			
			<view class="row-ts poser">
				<view class="rs-name">结算方式</view>
				<view class="rs-pos">
					<label v-for="(k,v) in countList" :key="v" :class="{'acts':formData.settlement == k.id}" 
					@click="checkcount(k,v)">{{k.settlement}}</label>
				</view>
			</view>
			
			<view class="row-ts poser" v-if="formData.settlement==3">
				<view class="rs-name">期望工资</view>
				<view class="rs-pos3 dis-row" style="width: 320rpx;">
					<view class="Nm1"><input style="width: 120rpx;" type="number" maxlength="6" v-model="formData.salary" placeholder="请输入数字"/></view>
					<view class="Nm2" @click="checkUnit()">{{formData.unitName}}</view>
					<view class="jj-ico" @click="checkUnit()"><image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/jijianxia.png"></image></view>
				</view>
			</view>
			<view class="row-ts poser" v-if="formData.settlement==1 || formData.settlement==2">
				<view class="rs-name">期望工资</view>
				<view class="rs-pos3 dis-row" style="width: 320rpx;">
					<view class="Nm1"><input type="number" v-model="formData.salary" maxlength="6" placeholder="请输入数字" style="width: 80rpx;padding-left: 20rpx;"/></view>
					<view class="Nm2">{{formData.settlement==1?'元/天':'元/月'}}</view>
					<!-- <view class="jj-ico" @click="checkJijianIco"><image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/jijianxia.png"></image></view> -->
				</view>
			</view>
			<u-form-item label="找活状态" fontSize="12" readonly labelWidth="100"
				prop="userInfo.range" borderBottom @click="checkStatus()">
				<u--input
					v-model="formData.statusName" 
					fontSize="14" 
					readonly  
					disabledColor="#0F0F0F" 
					inputAlign="right"  
					border="none" 
					placeholder="请选择"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			</u--form>
			<view style="height: 90rpx;"></view>
			<view class="btnfooter">
				<view class="ftbtn">
					<button class="btm" @click="sendSave">保存</button>
				</view>
			</view>
		</view>
		
		<!--地址-->
		<pop ref="city" :direction="direction" :is_close="true" :is_mask="true" :width="100">
		     <view class="con-del dis-clm" v-if="cityList && cityList.length>0">
				 <view class="cityName">选择地点</view>
				 <view class="checkgongzhongLList row-box" v-if="selectCity.length>0">
					<view v-for="(se,sc) in selectCity" :key="sc" class="dis-row" @click="delSelectCity(se,sc)">
					<text>{{se.name}}</text><label><image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/cc.png"></image></label>
					</view>
				 </view>
				 <view class="cityList dis-row">
				 	<view class="sheng dis-clm">
				 		<scroll-view scroll-y="true">
				 			<view class="sheng-Lst" 
							v-for="(cityitem,cityindex) in provinceList" 
							:key="cityindex" 
							:class="{'shengActive':(cityitem.active==1)}"
							@click="cityClick(cityitem,cityindex,1)"
							>{{cutstr(cityitem.name,10)}}</view>
				 		</scroll-view>
				 	</view>
				 	<view class="shi dis-clm">
						<scroll-view scroll-y="true">
							<view class="shi-lst" v-for="(shiItem,shiIndex) in cityList" 
							:key="shiIndex"
							:class="{'shiActive':(shiItem.active==1)}"
							@click="cityClick(shiItem,shiIndex,2)"
							>{{cutstr(shiItem.name,10)}}</view>
						</scroll-view>
					</view>
				 	<!-- <view class="qu dis-clm">
						<scroll-view scroll-y="true">
							<view class="qu-lst" v-for="(quitem,quindex) in countyList" :key="quindex"
							:class="{'quActive':(quitem.active==1)}"
							@click="cityClick(quitem,quindex,3)"
							>{{cutstr(quitem.name,10)}}</view>
						</scroll-view>
					</view> -->
				 </view>
				 
				<view class="addres-footer dis-row">
					 <view class="addres-btn" @click="cleanNew">清除</view>
					 <view class="addres-btn" @click="citySure">确定选择</view>
				 </view>
			 </view>
		</pop>
		
		<!--全部工种-->
		<pop ref="gongzhong" :direction="direction" :is_close="true" :is_mask="true" :width="100">
			 <view class="con-del dis-clm">
				 <view class="cityName">全部工种</view>
				 <view class="checkgongzhongLList row-box" v-if="selectCheckgognzhong.length>0">
					 <view v-for="(se,sc) in selectCheckgognzhong" :key="sc" class="dis-row" @click="delSelectgz(se,sc)">
						 <text>{{se.skillName}}</text><label><image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/cc.png"></image></label>
					 </view>
				 </view>
				 <view class="cityList dis-row">
				 	<view class="sheng dis-clm">
				 		<scroll-view scroll-y="true">
				 			<view class="sheng-Lst" v-for="(gzitem,gzindex) in gongzhongList" 
								:key="gzindex" 
								:class="{'shengActive':(gzlevelone==gzindex)}"
								@click="gzTaskLevelone(gzitem,gzindex)">
								{{cutstr(gzitem.skillName,10)}}
							</view>
				 		</scroll-view>
				 	</view>
				 	<view class="leveltwo dis-clm" v-if="gongzhongList[gzlevelone] && gongzhongList[gzlevelone].child">
						<scroll-view scroll-y="true">
							<view class="shi-lst" v-for="(shiItem,shiIndex) in gongzhongList[gzlevelone].child" 
							:key="shiIndex"
							:class="{'shiActive':(gzleveltwo === shiIndex)}"
							@click="gzTaskLevelTwo(shiItem,shiIndex)"
							style="width: 400rpx;"
							>
								{{shiItem.skillName}}
							</view>
						</scroll-view>
					</view>
			
				 </view>
				 <view class="addres-footer dis-row">
					 <view class="addres-btn" @click="cleanGongZhongIndex">清除</view>
					 <view class="addres-btn" @click="getCheckGongZhong">确定选择</view>
				 </view>
			 </view>
		</pop>
		
		<!--熟练度-->
		<pop ref="status" :direction="direction" :is_close="true" :is_mask="true" :width="100">
			<view class="popOption">
				<view class="title">找活状态</view>
				<view class="option">
					<view
						v-for="(uv,ui) in statusList" 
						:key="ui" 
						:class="{'active':formData.status === uv.id}" 
						@click="statusChange(uv)">{{uv.name}}</view>
				</view>
				<!-- <view class="define">
					<view @click="statusDefine()">确定</view>
				</view> -->
			</view>
		</pop>
		<!--寄件类型-->
		<pop ref="unit" :direction="direction" :is_close="true" :is_mask="true" :width="100">
			<view class="popOption">
				<view class="title">工资计量单位</view>
				<view class="option">
					<view
						v-for="(uv,ui) in unitList" 
						:key="ui" 
						:class="{'active':formData.salaryUnit === uv.id}" 
						@click="unitChange(uv)">{{uv.unit}}</view>
				</view>
				<view class="define">
					<view @click="unitDefine()">确定</view>
				</view>
			</view>
		</pop>
		
	</view>
</template>

<script>
import pop from "@/components/ming-pop/ming-map.vue"
import Index from '@/common/index-model.js'
let index=new Index();
let that = null;	
export default {
	data() {
		return {
			cityLists:[],
			provinceList:[],
			cityList:[],
			countyList:[],
			selectCity:[],
			selectCheckgognzhong:[],
			gongzhongList:{},
			gzlevelone:0,
			gzleveltwo:'',
			longWorkList:[],//长短工列表
			workTypeList:[],//干活方式列表
			countList:[],//结算方式
			unitList:[],//工资单位
			statusList:[
				{'id':0,'name':'找活中'},
				{'id':1,'name':'暂不找活'},
				{'id':2,'name':'有活预定下一个'},
			],
			formData:{
				hopeAddrIds:'',
				hopeAddrName:'',
				skillsId:'',
				skillsName:'',
				status:0,
				statusName:'找活中',
				workType1:'',
				workType2:'',
				settlement:'',
				salary:0,
				salaryUnit:'',
				unitName:'',
			},			
			rules:{},
			direction:'below',
		}
	},
	components: {
		pop
	},
	onLoad(opt) {
		this.getQueryType();//工种
		this.getCityList();//地址
		this.getLongWork();//长短工
		this.getWorkType();//干活方式
		this.getcountList()//结算方式
		this.getUnitList();//工资计算单位
		this.getCardDetail();
	},
	methods:{
		getLongWork(){
			index.getPublicUserMember({},'/client/public/find/workTypeOne','get',res=>{
				this.longWorkList=res.data.result;
			})
		},
		checkLongWork(item,index){
			this.formData.workType1=item.id;
		},
		getWorkType(){
			index.getPublicUserMember({},'/client/public/find/workTypeTwo','get',res=>{
				this.workTypeList=res.data.result;
			})
		},
		checkWorkType(item,index){
			this.formData.workType2=item.id;
		},
		//获取省市区数据列表
		getCityList() {
			index.getPublicUserMember({},'client/public/find/areaList','get',res=>{
				if(res.data.code == 200 && res.data.success){
					let cityList=res.data.result;
					let province=[];
					cityList.forEach((item,index)=>{
						if(item.pid==0){
							item.active=0;
							let city=[];
							cityList.forEach((t,ti)=>{
								if(t.pid==item.id){
									t.active=0;
									let county=[];
									cityList.forEach((th,tc)=>{
										if(th.pid==t.id){
											th.active=0;
											county.push(th);
										}
									})
									t.child=county;
									city.push(t);
								}
							})
							item.child=city;
							province.push(item);
						}
					});
					this.cityLists=province;
					province[0].active=1;
					this.provinceList=province;
					this.cityList=province[0].child;
					this.countyList=province[0].child[0].child;
				}
			})
		},
		cityClick(item,inx,type){
			if(type===1){
				this.cityList=item.child;
				this.countyList=item.child[0].child;
				this.provinceList.forEach((v,i)=>{
					if(v.active==1){
						this.provinceList[i].active=0;
					}
				})
				this.provinceList[inx].active=1;
			}else if(type===2){
				this.countyList=item.child;
				if(this.selectCity.length>=3){
					index.show_tips('城市选择不能超过3个');return false;
				}
				let cs=this.selectCity.filter((cc)=>cc.id==item.id);
				if(!cs[0]){
					this.selectCity.push(item);
				}
				this.cityList[inx].active=1;
			}else if(type===3){
				this.countyList.forEach((v,i)=>{
					if(v.active==1){
						this.countyList[i].active=0;
					}
				})
				this.countyList[inx].active=1;
			}
		},
		cleanAddresIndex() {
			if(uni.getStorageSync('token')){
				this.$refs.city.show()
			}else{
				index.show_tips('请先登录')
				setTimeout(()=>{
					index.navigate_to('/pagesC/login/login')
				},300)
				return false
			}
			
		},
		//清除选中的地址
		cleanNew() {
			this.hopeAddrIds='';
			this.hopeAddrName='';
			this.$refs.city.close()
		},
		citySure(){
			let hopeAddrIds='',hopeAddrName='';
			this.selectCity.forEach((v,i)=>{
				hopeAddrIds+=v.id+',';
				hopeAddrName+=v.name+',';
			})
			if(!hopeAddrIds || !hopeAddrName){
				index.show_tips('请选择省市区')
				return false
			}				
			this.formData.hopeAddrIds=index.strTrim(hopeAddrIds,',');
			this.formData.hopeAddrName=this.strHandle(hopeAddrName,',');
			this.$refs.city.close();
		},
		//移除选中的工种
		delSelectCity(se,sc) {
			if(this.selectCity.length>0){
				this.selectCity.splice(sc,1)
			}
		},
		//跳转到选择工种页面
		checkNavGongZhong() {
			this.$refs.gongzhong.show();
			return false;
		 },
		//查询工种
		getQueryType() {
			let types= "construction"
			this.Qurylist = []
			index.getPublicMember({},'client/skills/list/'+types,'get',res=>{
				if(res.data.success && res.data.code == 200){
							
					let arr = res.data.result
					let gzarr=[];
					if(arr.length>0){
						for(let i=0;i<arr.length;i++){
							if(arr[i].slevel == 2){
								this.Qurylist.push({name:arr[i].skillName,id:arr[i].id})
								gzarr.push(arr[i]);
							}
						}
						//console.log(gzarr,'=====gzarr====gzarr')
						//把三级工种压到二级工种里面
						if(gzarr.length>0){
							for(let j=0;j<gzarr.length;j++){
								gzarr[j].child = []
								for(let m=0;m<arr.length;m++){
									if(arr[m].pid == gzarr[j].id && arr[m].slevel == 3){
										gzarr[j].child.push(arr[m])
									}
								}
							}
						}
						this.gongzhongList = gzarr;
					}else{
						this.gongzhongList=[]
					}
				}else{
					this.Qurylist = []
					this.gongzhongList = []
				}
			})
		},
		//点击工种二级类型 切换下标
		gzTaskLevelone(item,gzindex) {
			this.gzlevelone = gzindex;
					this.gzleveltwo = '';
		},
		//切换三级工种 类型 下标
		gzTaskLevelTwo(item,gzindex) {
			this.isclickgztwo = true;
			if(this.selectCheckgognzhong.length >= 3){
				index.show_tips('所选工种不能超过3个')
				return false
			}else{
				let cs=this.selectCheckgognzhong.filter((cc)=>cc.id==item.id);
				if(!cs[0]){
					this.selectCheckgognzhong.push(item);
				}
				this.gzleveltwo=gzindex;
			}
		},
		//移除选中的工种
		delSelectgz(se,sc) {
			if(this.selectCheckgognzhong.length>0){
				this.selectCheckgognzhong.splice(sc,1)
				//delete this.selectCheckgognzhong[sc]
			}
		},
		//清空选中的工种
		cleanGongZhongIndex() {
			this.gzlevelone = 0
			this.gzleveltwo = 0
			this.selectCheckgognzhong = []
					this.form.objType = ''
			//this.$refs.gongzhong.close()
		},
		//确定选中的工种进行查询
		getCheckGongZhong() {
			if(this.selectCheckgognzhong.length == 0){
				index.show_tips('请先去选择要查询的工种')
				return false
			}
			let skillsId='',skillsName='';
			this.selectCheckgognzhong.forEach((item,index)=>{
				skillsId+=item.id+',';
				skillsName+=item.skillName+',';
			})
			this.formData.skillsId=index.strTrim(skillsId,',');
			this.formData.skillsName=this.strHandle(skillsName,',');
			this.$refs.gongzhong.close();
		},
		cutstr(str, len) {
			var str_length = 0;
			var str_len = 0;
			var str_cut = new String();
			str_len = str.length;
			for (var i = 0; i < str_len; i++) {
				var a = str.charAt(i);
				str_length++;
				if (escape(a).length > 4) {
					//中文字符的长度经编码之后大于4  
					str_length++;
				}
				str_cut = str_cut.concat(a);
				if (str_length >= len) {
					str_cut = str_cut.concat("...");
					return str_cut;
				}
			}
			//如果给定字符串小于指定长度，则返回源字符串；  
			if (str_length < len) {
				return str;
			}
		},
		
		checkStatus(){
			this.$refs.status.show();
		},
		statusChange(item){
			this.formData.status=item.id;
			this.formData.statusName=item.name;
			this.$refs.status.close();
		},
		statusDefine(){
			this.$refs.status.close();
		},
		
		//保存
		sendSave() {
			if(!this.formData.hopeAddrIds){
				index.show_tips('请选择期望地点')
				return false
			}
			if(!this.formData.skillsId){
				index.show_tips('请先选择工种')
				return false
			}
			if(!this.formData.workType1){
				index.show_tips('请先选择长短工')
				return false
			}
			if(!this.formData.workType2){
				index.show_tips('请先选择干活方式')
				return false
			}
			if(!this.formData.settlement){
				index.show_tips('请先选择结算方式')
				return false
			}
			if(this.formData.settlement==3 && !this.formData.salaryUnit){
				index.show_tips('请选择计量工资单位')
				return false
			}
			if(this.formData.settlement!=4 && !this.formData.salary){
				index.show_tips('请输入期望工资')
				return false
			}
			console.log(this.formData);
			index.getPublicUserMember(this.formData,'/client/card/modify','post',res=>{
				if(res.data.code == 200 && res.data.success){
					uni.setStorageSync('useredit',2)
					index.show_tips('操作成功')
					setTimeout(()=>{
						index.navigate_back(1)
					},500)
				}else{
					index.show_tips(res.data.message);
					return false
				}
			})
		},
		//结算
		getcountList() {
			index.getPublicUserMember({},'client/public/find/settlement','get',res=>{
				if(res.data.code == 200 && res.data.success){
					this.countList = res.data.result
				}
			})
		},
		checkcount(k,v) {
			if(k.id==1){
				this.formData.salaryUnit='';
				this.formData.unitName='';
			}else if(k.id==2){
				this.formData.salaryUnit='';
				this.formData.unitName='';
			}else if(k.id==3){
				this.formData.salaryUnit=this.unitList[0].id;
				this.formData.unitName=this.unitList[0].unit;
			}else if(k.id==4){
				this.formData.salaryUnit='';
				this.formData.unitName='';
				this.formData.salary=0;
			}
			this.formData.settlement=k.id;
		},
		
		//寄件类型列表
		getUnitList() {
			index.getPublicUserMember({},'client/public/unit/of/money','get',res=>{
				console.log(res);
				if(res.data.code == 200 && res.data.success){
					this.unitList = res.data.result
				}
			})
		},
		checkUnit() {
			this.$refs.unit.show()
		},
		//寄件选择
		unitChange(item) {
			this.formData.salaryUnit = item.id
			this.formData.unitName = item.unit
		},
		//确定寄件
		unitDefine() {
			this.$refs.unit.close()
		},
		//获取名片
		getCardDetail(){
			index.getPublicUserMember({},'/client/card/detail','get',res=>{
				if(res.data.code == 200 && res.data.success){
					let data=res.data.result;
					if(!data.avatar){
						data.avatar='http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/default-avatar.png';
					}
					this.formData.hopeAddrIds=data.hopeAddrIds?index.strTrim(data.hopeAddrIds,','):'';
					this.formData.hopeAddrName=data.hopeAddr?this.strHandle(data.hopeAddr,','):'';
					this.formData.skillsId=data.skillsId?index.strTrim(data.skillsId,','):'';
					this.formData.skillsName=data.skills?this.strHandle(data.skills,','):'';
					this.formData.workType1=data.workType1;
					this.formData.workType2=data.workType2;
					this.formData.settlement=data.settlement;
					this.formData.salary=data.salary;
					this.formData.salaryUnit=data.salaryUnit;
					this.formData.unitName=data.salaryUnitStr;
					this.formData.status=data.status;
					let status=data.status;
					this.formData.statusName=this.statusList[status].name;
				}
			})
		},
		strHandle(str,char=','){
			str=index.strTrim(str,char);
			return index.strRep(str,',','、');
		}
	}
}
</script>

<style>
@import url("@/static/css/publics.css");
@import url("./findJob.css");	
</style>